<template>
	<view class="home">
		<!-- <serial-port :dataType="dataNub" @clickPort="getPort"></serial-port> -->
		<view class="">
			展示内容：{{datatext}}
		</view>
		<u--input placeholder="请输入内容" border="surround" v-model="sendText"></u--input>
		<button @click="sendReq">网络</button>
		<image style="width: 100vw; height: 60vh; background-color: #eeeeee;" :src="mapSrc"></image>

	</view>
</template>

<script>
	import serialPort from '@/components/serialPort.vue'
	export default {
		components: {
			serialPort
		},
		data() {
			return {
				mapSrc: 'http://admin:sjgq12345@192.168.1.33/onvif-http/snapshot?profile_1',
				sendText: "",
				dataNub: '',
				datatext: '',
				dataHex: '',
			}
		},
		methods: {
			// 网络
			sendReq() {
				uni.request({
					url: "http://admin:sjgq12345@192.168.1.33/onvif-http/snapshot?profile_1",
					data: {},
					header: {
						'content-type': 'application/json',
						'Authorization': "token"
					},
					method: 'GET',
					dataType: 'json',
					responseType: "arraybuffer", //最重要的一步不要少
					success: (res) => {
						//这里的url可以直接在页面显示
						let url = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data);
						this.mapSrc = url
					}

				})

			},
			// 网络
			// getPort(e) {
			// 	this.dataHex = this.hexToString(e)
			// 	console.log('eeeeeeeee', e);
			// 	this.hexToString(this.dataHex)
			// },
			//转字符串
			hexToString(hex) {
				let result = '';
				for (let i = 0; i < hex.length; i += 2) {
					let charCode = parseInt(hex.substr(i, 2), 16);
					result += String.fromCharCode(charCode);
				}
				return result;
			},
		},
	}
</script>

<style>
	.content {
		flex: 1;
	}

	.uni-list-cell {
		flex-direction: row;
	}

	.uni-list-cell-picker {
		flex-direction: row;
		justify-content: space-between;
		flex: 1;
		padding: 20rpx;
	}

	.device-msg-container {
		flex: 1;
	}

	.device-msg {
		flex: 1;
	}

	.device-msg-head {
		background-color: #efefef;
		flex-direction: row;
		justify-content: space-between;
		padding: 10rpx;
	}

	.device-msg-radio {
		flex-direction: row;
	}

	.device-msg-content {
		flex: 1;
		padding: 10rpx;
	}
</style>